Positions

Principe de base :
La propriété «position» permet de manipuler la disposition de l'élément choisi.

Flux de la page

Le flux de la page conditionne la manière d'afficher le contenu.
Le flux normal affiche les éléments dans l'ordre du document source. Les éléments "inline" les uns à côté des autres et les éléments "block" les uns en dessous des autres.

Tous les éléments d'un document sont dans le flux, par défaut. On peut les "sortir du flux" si on leur applique une position absolute ou fixed.

5 Valeurs

La propriété CSS "position" accepte plusieurs valeurs possibles :

• static
• relative
• fixed
• absolute
• sticky

position: static;

C'est la valeur par défaut de tous les éléments html. Ils sont donc affichés selon le flux normal de la page.
Ci-dessous trois div (élément de type block") identiques, sans paramètre de position (ou alors la valeur "static").

    <div class="parent">
        <div class="enfant_rose">BOITE 1</div>
        <div class="enfant_rose">BOITE 2</div>
        <div class="enfant_rose">BOITE 3</div>
    </div>

    .enfant1{
    	background-color:#F9C;
    	height: 50px;
    	width: 100px;
    	padding: 10px;
    	border: solid black thin;
    }

position: relative;

L'élément sera positionné relativement à sa position normale dans le flux. On va donc modifier son emplacement APRÈS que le navigateur ait construit la page.
Ci-dessous, la boite 1 est déplacée relativement à sa position de départ. Elle est "poussée" vers la droite et vers le bas.

        <div class="parent">
            <div class="enfant_bleu">BOITE 1</div>
            <div class="enfant_rose">BOITE 2</div>
            <div class="enfant_rose">BOITE 3</div>
        </div>

    

        .enfant_bleu{
        	background-color:#59C;
        	height: 50px;
        	width: 100px;
        	padding: 10px;
        	border: solid black thin;
        	position:relative;
        	top: 72px;
        	left: 130px;
        }

    

position: fixed;

L'élément sera positionné par rapport au viewport, c'est à dire la fenêtre du navigateur. Donc l'élément restera en place même si on scrolle dans notre document.
Dans cet exemple il s'agit de la boite jaune qui se balade dans l'écran.

Notons que la position fixed retire du flux l'élément. Le flux d'affichage normal commence donc avec la boite 2.

    <div class="parent">
        <div class="enfant_jaune">BOITE 1</div>
        <div class="enfant_rose">BOITE 2</div>
        <div class="enfant_rose">BOITE 3</div>
    </div>

    .enfant_jaune{
    	background-color:#FF5;
    	height: 50px;
    	width: 100px;
    	padding: 10px;
    	border: solid black thin;
    	position:fixed;
    	top: 72px;
    	left: 230px;
    }

position: absolute;

L'élément sera positionné relativement à son plus proche parent positionné (c'est-à-dire qui possède une valeur css de position)

Notons que la position absolute retire du flux l'élément. Le flux d'affichage normal commence donc avec la boite 2.

    <div class="parent">
        <div class="enfant_bleu2">BOITE 1
            <div class="enfant_vert">BOITE 4</div>
            fin de boite 1
            </div>
        <div class="enfant_rose">BOITE 2</div>
        <div class="enfant_rose">BOITE 3</div>
    </div>

    .enfant_vert{
    	background-color:#0f5;
    	height: 30px;
    	width: 70px;
    	padding: 10px;
    	border: solid black thin;
    	position:absolute;
    	top: 25px;
    	left: 50px;
    }

Exemple avec tout